<template>
    <div class="body">
        <div class="min-form" v-show="minForm">
            <Card :bordered="false">
                <p slot="title">{{ formItem.id ? __('编辑用户') : __('新增用户') }}</p>
                <div class="min-form-inner">
                    <div class="min-form-body">
                        <i-form ref="form" :rules="rules" :model="formItem" :label-width="110" class="w-1000">
                            <Row :gutter="16">
                                <i-col span="12">
                                    <FormItem :label="__('名字')" :prop="formItem.id ? '' : 'name'">
                                        <i-input v-model.trim="formItem.name" placeholder="" :disabled="formItem.id ? true : false"></i-input>
                                    </FormItem>
                                    <FormItem :label="__('标识符')" prop="identity">
                                        <i-input v-model="formItem.identity" placeholder=""></i-input>
                                    </FormItem>
                                    <FormItem :label="__('密码')" prop="password">
                                        <i-input v-model="formItem.password" :placeholder="formItem.id ? '不修改密码请留空' : '密码不能为空'"></i-input>
                                    </FormItem>
                                </i-col>
                                <i-col span="12">
                                    <FormItem :label="__('所属角色')">
                                        <i-select v-model="userRole" multiple style="width:400px">
                                            <i-option v-for="item in roles" :value="item.id" :key="item.id">{{ item.name }}</i-option>
                                        </i-select>
                                    </FormItem>
                                    <FormItem :label="__('状态')">
                                        <i-switch v-model="formItem.status" size="large" true-value="1" false-value="0">
                                            <span slot="open">{{ __('启用') }}</span> <span slot="close">{{ __('禁用') }}</span>
                                        </i-switch>
                                    </FormItem>
                                </i-col>
                            </Row>
                        </i-form>
                    </div>
                    <div class="min-form-footer">
                        <i-button type="primary" :loading="loading" @click.native.prevent="handleSubmit('form')">{{ __('确定') }}</i-button>
                        <i-button style="margin-left: 8px;" @click="cancelMinForm('form')">{{ __('取消') }}</i-button>
                    </div>
                </div>
            </Card>
        </div>

        <div class="wrap">
            <div class="fixed-footer-offset">
                <Row>
                    <i-col span="24">
                        <search ref="search" @getDataFromSearch="getDataFromSearch" @add="add"></search>
                        <i-table
                            stripe
                            :loading="loadingTable"
                            ref="table"
                            :border="false"
                            :columns="columns"
                            :data="data"
                            class="search-table"
                            @on-selection-change="onSelectionChange"
                        >
                        </i-table>
                    </i-col>
                </Row>
            </div>
        </div>
        <div class="fixed-footer">
            <Row justify="end">
                <i-col span="8">
                    <ButtonGroup shape="circle">
                        <i-button type="primary" icon="md-eye" @click="statusMany('1')" :disabled="!utils.permission('user_status_button')">{{
                            __('启用')
                        }}</i-button>
                        <i-button type="primary" icon="md-eye-off" @click="statusMany('0')" :disabled="!utils.permission('user_status_button')">{{
                            __('禁用')
                        }}</i-button>
                    </ButtonGroup>
                </i-col>
                <i-col span="16" class-name="fr">
                    <Page class="fr" :total="total" show-sizer @on-change="changePage" @on-page-size-change="changePageSize"></Page>
                </i-col>
            </Row>
        </div>
    </div>
</template>

<script src="./assets/index.js"></script>
